<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link>
</head>

<body>
    <input type="file" id="fileInput">
    <button id="mkdir" style="">mkdir</button>
    <img id="img">
    <div style="width:300px" id="dir"></div>
    <div id="messageListContainer" style="width:700px" class="message-list-container"></div>
    <script type="module">
        import {
            loadLinksTo,
            initMessageList,
            showMessage

        } from "./uiCreator.js"
        import { getItemFromDB, getAllKeysFromDB, upload, dir, drawDirectory, createFolder } from "./vStorage.js"
        loadLinksTo(document, "css/main/vStorage.css")
        loadLinksTo(document, "css/main/message.css")
        loadLinksTo(document, "css/main/page.css")
        const inputElement = document.getElementById("fileInput");

        async function itemClickedCallback(path) {
            let result = await getItemFromDB(path, "file", "my_vitae")
            let reader = new FileReader();
            reader.onload = function (e) {
                let img = document.createElement('img')
                img.src = e.target.result;
                img.style = "width:100%"
                showMessage(messageList, `${path}<br>${img.outerHTML}`)
            }
            reader.readAsDataURL(result);
        }
        let selected = drawDirectory(await dir(), document.getElementById("dir"), itemClickedCallback)
        inputElement.addEventListener("change", function () {
            const selectedFile = inputElement.files[0];
            console.log(selected)
            let key = (selected.selectedPath ?? "rootdir") + "/" + selectedFile.name;
            upload(selectedFile, key).then(async () => {
                document.getElementById("dir").innerHTML = "";
                drawDirectory(await dir(), document.getElementById("dir"), itemClickedCallback)
            });
        })
        let messageList = initMessageList(document.getElementById('messageListContainer'))
        document.getElementById("mkdir").addEventListener('click', async (e) => {
            await createFolder((selected.selectedPath ?? "") + "/newdir")
            document.getElementById("dir").innerHTML = "";
            drawDirectory(await dir(), document.getElementById("dir"), itemClickedCallback, null, selected)
        })
    </script>
</body>

</html>